// 针对修改数据源数据的说明
// 1. 修改方法分为同步与异步，官方要求，同步方法放在mutations中，异步方法放在actions中；
// 2. 这个不是强制的，可以不遵守，但是会出问题（不是报错，而是逻辑问题）；
// 3. mutaions里面的方法可以修改数据源，但是不是直接操作state中的数据；
// 4. actions里面的方法代码为异步代码，但实际最终修改数据的依然是mutations中的方法；

// 导入相应的模块
import Vue from "vue";
import Vuex from "vuex";
// 导入经过模块化的模块
import users from "./modules/users"
import goods from "./modules/goods"
import common from "./modules/common"
// 在Vue中使用Vuex
Vue.use(Vuex);
// 默认导出：导出一个vuex仓库实例
export default new Vuex.Store({
    // state属性：提供统一数据源的属性对象（类似于组件中data对象）
    state: {
        // 统计的计数器
        count: 0,
        username: "zhangsan",
        age: "22",
    },
    // mutations属性：里面存放一些修改数据源的方法（同步代码）
    // mutations属性里的方法至少需要一个形参，最多俩个形参
    // 形参1：state对象，表示默认的数据源
    // 形参2：（可选参数）标识数据修改的方式
    mutations: {
        // 每次让count+1
        addCount(state) {
            state.count++;
        },
        // 如果在这里写异步代码会让调试工具与实际的显示的数据不一致，从而影响我们的判断
        // addCount(state) {
        //     setTimeout(() => {
        //         state.count++;
        //     },5000)
        // },
        // 修改年龄
        setAge(state, age) {
            state.age = age;
        },
        // 新建修改用户名的方法供actions中调用
        setUsername(state, username) {
            state.username = username;
        },
        // .....
    },
    // actions属性：里面存放一些司改数据源的方法（异步代码）
    // actions属性里的方法至少需要一个形参，最多俩个形参
    // 形参1：context上下文对象，表示仓库对象
    // 形参2：（可选参数）标识数据修改的方式
    // actions里的方法其实并不是最终修改数据的方法，在actions中，最终是调用mutations中的方法进行修改数据的。因此，往往一个actions中的方法对应一个mutations中的方法
    actions: {
        // 设置用户名（异步）
        setUsername(context, username) {
            setTimeout(() => {
                // 修改数据，调用mutations中的方法进行修改
                // context 等同于在单文件组件中的 this.$store
                context.commit("setUsername", username);
            }, 5000);
        },
        // .....
    },
    // getters属性：用于加工处数据（类似于filter对象）
    getters: {
        // 判断用户是否成年
        // 因为其需要处理数据，因此形参是数据源
        isAdult(state) {
            return state.age >= 18 ? "成年了" : "未成年";
        },
        // ... 
    },
    // modules属性：模块属性（用于实现vuex的模块化）
    // 实现步骤：
    // 1. 产生模块化对应的空的文件（例如，空的文件放在“./modules”下）
    // 2. 编写对应的模块文件内容（文件内容书写如上述4个属性，或者如当前文件但排除modules属性）
    // 3. 在模块化文件中记得导出，在本文件中记得导入并在modules属性这里使用（注册模块）
    // 命名空间名字符串就是modules对象属性的名字
    modules: {
        users,          // users: users,
        goods,          // goods: goods,
        common,         // common: common
    },
});
